<div class="findtrs">
	<div class="ftitle">
		<div class="lt">
			<h2>卡片列表</h2>
		</div>
	</div>

	<div class="funaduibi fbai qmbox1" style="z-index: 10">
		<div class="form">
			<form action="" method="post">
				<ul class="clearfix">
					<li>
						<label>时间</label>
						<div class="bt">
							<input class="t1 t2" type="text" id="test1" value="" placeholder="开始日期"/>
							<span><img src="__STATIC__/lib/index/images/qm18.png" ></span>
							<input class="t1 t2" type="text" id="test2" value="" placeholder="结束日期"/>
						</div>
					</li>
					<li style="width: 180px;">
						<label>卡状态</label>
						<select class="lsele" name="card_status" id="card_status">
							<option value="">请选择状态</option>
							<option value="1">激活</option>
							<option value="2">冻结</option>
							<option value="3">注销</option>
						</select>
					</li>
					<li style="width: 180px;">
						<label>卡号类型</label>
						<input class="t1 t2" style="width: 200px;" type="text" name="card_type" id="card_type" value="" placeholder="请输入6位卡头"/>
					</li>
				</ul>
				<ul class="clearfix">
					<li style="width: 220px;">
						<label>卡号</label>
						<input class="t1 t2" style="width: 200px;" type="text" name="card_num" id="card_num" value="" placeholder="请输入卡号"/>
					</li>
					<li style="width: 220px;">
						<label>备注</label>
						<input class="t1 t2" style="width: 200px;" type="text" name="remark" id="remark" value="" placeholder="请输入备注"/>
					</li>
					<li>
						<div class="btn">
							<!--							<a href="#" class="b1"><span>清空</span></a>-->
							<a href="#" class="b1 on" lay-submit lay-filter="*"><span>查询</span></a>
						</div>
					</li>
				</ul>
			</form>
		</div>
	</div>
	<table border="0" cellspacing="1" style="min-width: 1200px;width: 100%"
		   cellpadding="1" width="100%" id="balanceTable" lay-filter="balanceTable"></table>

	</table>
</div>



<script type="text/html" id="toolbar">
	<button type="button" class="layui-btn layui-btn-sm" lay-event="active">激活</button>
	<button type="button" class="layui-btn layui-btn-sm" lay-event="suspended">冻结</button>
	<span style="font-size: 20px;color: red;font-weight: bold;padding-left: 30px">1,开卡预计1分钟内,刷新页面即可;&nbsp;&nbsp;&nbsp;&nbsp;2,点击卡详情，可以修改卡余额</span>
</script>

<script type="text/javascript">
	layui.use(['form', 'laydate', 'table'], function () {
		var laydate = layui.laydate,
				form = layui.form,
				table = layui.table; //表格

		//执行一个laydate实例
		laydate.render({
			elem: '#test1' //指定元素
		});
		laydate.render({
			elem: '#test2' //指定元素
		});
		table.render({
			elem: '#balanceTable',
			height: 'auto',
			cellMinWidth: '80',
			totalRow: true,
			method: 'post',
			toolbar: '#toolbar',
			url: "{:url('cards/cardList')}",
			id: 'balanceTable',
			defaultToolbar: ['filter', 'exports'],
			text:{none: '无数据'},
			error: function(){
				setTimeout("window.location.href='" + "{:url('index/index')}" + "'; ", 1000);
			},
			cols: [[
				{ type: 'checkbox', fixed: 'left'},
				{ type: 'numbers'},
				{ field: 'check_status', title: '类型', width:80 ,
					templet:function (d) {
						const check_status  =   d.check_status;
						var   html          =   '';
						switch (check_status) {
							case 0:
								html = "<span style='color: #8c8c8c'>开卡中</span>";
								break;
							case 1:
								html = "<span style='color: green'>已开卡</span>";
								break;
							case 2:
								html = "<span style='color: red'>开卡失败</span>";
								break;
						}
						return html;
					}
				},
				{ field: 'status', title: '状态', width:80,
					templet:function (d) {
						const status=   d.status;
						var   html  =   '';
						switch (status) {
							case '1':
								html = "<span style='color: green'>激活</span>";
								break;
							case '2':
								html = "<span style='color: #6c757d'>冻结</span>";
								break;
							case '3':
								html = "<span style='color: red'>删除</span>";
								break;
							case '4':
								html = "<span style='color: red'>Fraud</span>";
								break;
						}
						return html;
					}
				},
				{ field: 'card_name', align: 'left', title: '持卡人', width:130 ,
					templet: function (d) {
						return d.first_name + ' ' + d.middle_name + ' ' + d.last_name;
					}
				},
				{ field: 'card_num', align: 'left', title: '卡号', width:220,totalRowText:'合计:',
					templet: function (d) {
					    const card_status = d.status;
						var html = '';
						if(card_status == '3'){
							var html = '<a class="layui-btn layui-btn-xs" href="{:url(\'cards/cardInfoLog\')}?card_id=' + d.id + '">详情</a>';
						}else{
							var html = '<a class="layui-btn layui-btn-xs" href="{:url(\'cards/cardInfo\')}?card_id=' + d.id + '">详情</a>';
						}

						html += '&nbsp;&nbsp;' + d.card_num;
						return html;
					}
				},
				{field: 'balance', title: '可用余额($)', align:"left",
					style:'font-weight:bold',totalRow: true ,width: 120},
				{field: 'balance_account', title: '卡限额($)', align:"left",
					style:'font-weight:bold',totalRow: true ,width: 120},
				{ field: 'exp_date', align: 'left', title: '过期时间(月/年)',width: 140,
					templet: function (d) {
						const exp_date = d.exp_date;
						const bank_type= d.bank_type;
						if(exp_date == ''){
							return '开卡中';
						}else{
							if(bank_type == 3){
								return exp_date.substr(0,2) + '/' + exp_date.substr(2,2);
							}else{
								return exp_date.substr(5,2) + '/' + exp_date.substr(2,2);
							}
						}
					}
				},
				{ field: 'cvv', align: 'left', title: 'CVC',width: 100,
					templet: function (d) {
						const cvv = d.cvv;
						if(cvv == ''){
							return '开卡中';
						}else{
							return cvv;
						}
					}
				},
				{ field: 'ctime', align: 'left', title: '开卡时间' ,width: 160,
					templet: function (d) {
						return layui.util.toDateString(d.ctime * 1000, "yyyy-MM-dd HH:mm:ss");
					}
				},
				{ field: 'remarks', align: 'left', title: '备注' }
			]],
			page: true,
			limit: 10,
			limits: [10, 100 , 1000 ,5000],
		});
		form.on('submit(*)', function (data) {
			layui.table.reload('balanceTable', {
				// where: data.field
				where: {card_type:$("#card_type").val(),
					card_status:$("#card_status").val(),
					card_num:$("#card_num").val(),
					remark:$("#remark").val(),
					stime:$("#test1").val(),
					ltime:$("#test2").val()}
				, page: {
					curr: 1 //重新从第 1 页开始
				}
			});
			return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
		table.on('toolbar(balanceTable)', function(obj) {
			const checkStatus = table.checkStatus(obj.config.id);
			const data = checkStatus.data;
			if(obj.event == 'suspended' || obj.event == 'active'){
				if(data.length >0){
					switch (obj.event) {
						case 'suspended':
							var status = '1';
							var msg    = 'active';
							break;
						case 'active':
							var status = '2';
							var msg    = 'blocked';
							break;
					}

					var id_array = [];
					for(var i=0;i<data.length;i++){
						if(data[i].status == status){
							id_array.push(data[i].id);
						}
					}
					if(id_array.length >0){
						if(id_array.length >10){
							layer.msg("每次只能选择10张卡.",{time:2000,icon:16});
							return false;
						}
					}else{
						layer.msg("至少选择一张卡 " + msg + ".",{time:2000,icon:16});
						return false;
					}

					var loading =parent.layer.load(1, {shade: [0.1,'#fff']});
					$.post("{:url('changeCardStatus')}",{id_array:id_array,type:obj.event},function(res){
						parent.layer.close(loading);
						if(res.code>0){
							layer.msg(res.msg, {time: 1500, icon: 16}, function () {
								location.href = res.url;
							});
						}else{
							layer.msg(res.msg,{time:1500,icon:16});
						}
					});
				}else{
					layer.msg("请选择需要更新的卡.",{time:2000,icon:16});
				}
			}
		});
	});
</script>